<template>
<div>
  <div class="title">热销推荐</div>
  <ul>
      <li class="item border-bottom" v-for="item in recommendList" :key="item.id">
              <img class="item-img" :src="item.imgUrl" alt="">
          <div class="item-info">
              <p class="item-title">{{ item.title }}</p>
              <p class="item-desc">{{ item.desc }}</p>
              <button class="item-button">查看详情</button>
          </div>
      </li>
  </ul>
</div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  data () {
    return {
      recommendList: [
        { id: '001', imgUrl: 'http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg', title: '大连圣亚海洋世界', desc: '浪漫大连首站,浪漫的海洋主题乐园' },
        { id: '002', imgUrl: 'http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg', title: '大连圣亚海洋世界', desc: '浪漫大连首站,浪漫的海洋主题乐园' },
        { id: '003', imgUrl: 'http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg', title: '大连圣亚海洋世界', desc: '浪漫大连首站,浪漫的海洋主题乐园' },
        { id: '004', imgUrl: 'http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg', title: '大连圣亚海洋世界', desc: '浪漫大连首站,浪漫的海洋主题乐园' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../../assets/styles/mixins.less';
.title{
    margin-top: .2rem;
    line-height: .8rem;
    background-color: #eee;
    text-indent: .2rem;
}
.item{
    overflow: hidden;
    display: flex;
    height:1.9rem;
    // background-color: red;
    .item-img{
        width: 1.7rem;
        height: 1.7rem;
        padding: .1rem;
        // background-color: green;
    }
    .item-info{
        flex: 1;
        padding: .1rem;
        min-width: 0;
        .item-title{
            line-height: .54rem;
            font-size: .32rem;
            #ellipsis
        }
        .item-desc{
            line-height: .4rem;
            color: #ccc;
            #ellipsis
        }
        .item-button{
            line-height: .44rem;
            background-color: #ff9300;
            padding:  0 .2rem;
            border-radius: .06rem;
            margin-top: .16rem;
            color: #fff;
        }
    }
}
</style>
